<!DOCTYPE html>
<html>
<head>
    <title>Media Query test</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/test-suite.css">
</head>
<body>

    <div class="main center">    
    
        <h1>Enquire.js Test Suite</h1>
        <h2>Simple automated functional tests</h2>
    
        <!-- this gets programmatically resized to trigger media queries -->
        <iframe id="suite" src="test-suite.html" frameborder="0" height="600" width="550">
        </iframe>
    </div>
    
    <script>

        (function() {

            function queueResizes(target, sizes, step) {
                var i = 0;
                
                step = step || 600;
                attr = "width";

                function factory(size) {
                    return function() {
                        target.width = size;
                    }
                }

                for(i = 0; i < sizes.length; i++) {
                    setTimeout(factory(sizes[i]), (i + 1) * step);
                }
            }

            queueResizes(document.querySelector("#suite"), [400, 650, 550]);

        }());

    </script>

</body>
</html>